<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Register</title>
        <link href="../css/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    </head>
   
    <body>
        <div id="wrapper">
        <!-- Common Header for our site -->
		<div id="header">
		    <div id="logo">
		        <h1><a href="../login/index.html">FaceClock</a></h1>
		        <h2><a href="../login/index.html">Serving Guests Since 2017</a></h2>
		    </div>
		    <!-- end div#logo -->
		    <!-- end div#menu -->
		</div>
            <!-- end div#header -->
            <div id="page">
                <div id="content">
                    <div id="welcome">
                        <h2></h2>
                        <!-- Fetch Rows -->
                        <input type="file" id="imagefile">
					    <hr>
					    <img style="max-height: 300px; height: 8em; min-width:8em;">
					    <hr>   
                        <textarea id="image" name="image" cols="40" rows="8"></textarea><br/>
                        <input type='button' value='Login' onclick="facelogin()"/>&nbsp;<input type='button' value='Cancel' onclick="location.href='../login/index.html'"/>
                    </div>
                    <!-- end div#welcome -->			
                    
                </div>
                <!-- end div#content -->
                <div id="sidebar">
                </div>
                <!-- end div#sidebar -->
                <div style="clear: both; height: 1px"></div>
            </div>
            <!-- Common footer for our site -->
			<div id="footer">
			    <p id="legal">Copyright &copy; 2017 Infosys. All Rights Reserved.<br/>
			    </p>
			</div>
        </div>
        <!-- end div#wrapper -->
    </body>
<script>
var token = "";
var storage = window.localStorage;
function run(input_file,get_data){
    /*input_file：文件按钮对象*/
    /*get_data: 转换成功后执行的方法*/
    if ( typeof(FileReader) === 'undefined' ){
        alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
    } else {
        try{
            /*图片转Base64 核心代码*/
            var file = input_file.files[0];
            //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.onload = function(){
                get_data(this.result);
            }
            reader.readAsDataURL(file);
        }catch (e){
            alert('图片转Base64出错啦！'+ e.toString())
        }
    }
}
$(function () {
   $("#imagefile").change(function () {
       run(this, function (data) {
           $('img').attr('src',data);
           var str = data.split(",")[1];             
           $('#image').val(str);
       });
   });
});

function facelogin(){
	$.ajax({
		type : "post",
		url : "../loginfacade/faceLoginFacade",
		dataType : 'json',
		data : {			
			image : $("#image").val(),
		},
		success : function(data, textStatus) {
			if (data.success) {
				token = data.token;
				var url = data.forwardUrl;
				storage.setItem("token",token);
				window.location.href = url+"?token="+token
			}else if (!data.success){
				alert(data.errorMessage);
				window.location.href = data.forwardUrl;
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert("Error:" + textStatus);
			alert(errorThrown.toString());
		}
	});
}
</script>
</html>
